<template>
    <div>
        <span style="margin-right:20px;">矿山拐点坐标</span>
        <el-button
          size="small"
              class="select"
              icon="el-icon-plus"
              type="warning"  @click="addFunc">新增</el-button>
        <el-table
                :data="tableData"
                style="width: 100%">
            <template v-for="(item, index) in privateConfig">
                        <el-table-column
                                :key="index"
                                v-if="item.type == 'index'"
                                :label="item.label || '序号'"
                                align="center"
                                style="height: 1000px"
                        >
                            <template slot-scope="scope">
                                <p>{{++scope.$index}}</p>
                            </template>
                        </el-table-column>
            <el-table-column
            align="center"
            :key="index"
                    v-if="!item.type"
                    :prop="item.prop"
                    :label="item.label"
                   >
            </el-table-column>
            <el-table-column
            align="center"
            :key="index"
                    v-if="item.type=='operation'"
                    prop=""
                    label="操作">
                <template slot-scope="scope">
                <el-button size="small" v-if="item.edit" type="primary" @click="editFunc(scope.$index, tableData)">编辑</el-button>
                <el-button size="small" v-if="item.delete" type="danger" @click="deleteFunc(scope.$index, tableData)">删除</el-button>
                </template>
            </el-table-column>
            </template>
        </el-table>
        <el-dialog
                :title="isEdit?'编辑':'新增'"
                :visible.sync="dialogVisible"
                width="30%"
                append-to-body
               >
            <el-form  :inline="true" :model="formModel" class="demo-form-inline">
                <template v-for="(item, index) in privateConfig">
                <el-form-item :key="index" v-if="item.type!='operation'&&!item.addEditHidden" :label="item.label">
                      <span style="color: red;margin-left:-50px;position:absolute">*</span>
                    <el-input  v-model="formModel[item.prop]" ></el-input>
                </el-form-item>
                </template>
                <div class="btomm_right" >
                  <el-button size="small" type="" @click="cancelClick ">取消</el-button>
                    <el-button size="small" type="primary" @click="saveClick">保存</el-button>
                </div>
            </el-form>
        </el-dialog>
    </div>  
</template>
<style>
</style>
<script>
    export default {
        name: 'XDTableComp',
        props: ['config', 'value'],
        data() {
            return {
                formModel: {},
                isEdit: '',
                editIndex: 0,
                dialogVisible: false,
                tableData: this.$props.value,
                //  [{
                //     x: '2016-05-03',
                //     y: 'Tom',
                // }, {
                //     x: '2016-05-02',
                //     y: 'Tom',
                // }, {
                //     x: '2016-05-04',
                //     y: 'Tom',
                // }, {
                //     x: '2016-05-01',
                //     y: 'Tom',
                // }],
                privateConfig: this.$props.config,
                    // [{
                    //     prop: 'x',
                    //     label: 'X'
                    // },
                    // {
                    //     prop: 'y',
                    //     label: 'Y'
                    // },
                    // {
                    //     prop: '',
                    //     label: '操作',
                    //     type: 'operation',
                    //     edit: true,
                    //     delete: true
                    // }]
            }
        },
        methods: {
            addFunc() {
                this.isEdit = false
                this.dialogVisible = true
                console.log(this.privateConfig);
            },
            deleteFunc(index, rows) {
                rows.splice(index, 1);
            },
            editFunc(index, rows) {
                this.editIndex = index
                this.formModel = rows[index]
                this.isEdit = true
                this.dialogVisible = true
            },
            handleClose() {
                this.dialogVisible = false
                this.formModel = {}
            },
            cancelClick() {
                this.dialogVisible = false
                this.formModel = {}
            },
            saveClick() {
               console.log(this.formModel);
                if(!this.formModel.x||!this.formModel.y){
                    this.$message({
          message: '经纬度是必填',
          type: 'error'
        }); 
                    return 
                }else{
                     if (this.isEdit) {
                    this.tableData[this.editIndex] = this.formModel
                    this.tableData.unshift()
                    console.log(this.tableData);
                } else {
                    this.tableData.push(this.formModel)
                }
                this.formModel = {}
                this.dialogVisible = false
                }
            },
            submit() {
                this.$emit("input", this.tableData)
            }
        }
    }
</script>
<style lang="scss" scoped>
.btomm_right{
display: flex;width:496px;
    justify-content: flex-end;
}
</style>